<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimal-ui">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/cisall.css">
    <style>
        .map-search-box {
            overflow: hidden;
            position: relative;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .map-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .8);
        }
        .search-result {
            position: absolute;
            top: 0;
            right: -460px;
            bottom: 0;
            width: 460px;
            background: #e5e6e8;
            padding: 30px;
        }
        .search-result p {
            font-size: 13px;
        }
        .input-group-text {
            width: 100px;
            height: 46px;
            background: #e50012;
            color: #fff;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
        }
        .form-control {
            border-radius: 0;
            font-size: 14px;
            color: #7f7f7f;
        }
        .list-group-item {
            border: 0;
            border-bottom: 2px solid #b2b3b4;
        }
        .location {
            font-size: 40px;
            float: left;
            padding-right: 20px;
            margin-right: 16px;
            color: #e50012;
            border-right: 2px solid #656566;
        }
    </style>
</head>
<body>
<!--[if lte IE 8]>
<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
    <p class="browserupgrade font-size-18">
        你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>，以提高您的体验。
    </p>
</div>
<![endif]-->
<header>
    <nav class="navbar fixed-top  navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="../index.html">
            <img src="../../images/base/logo.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav navlist ml-auto">
                <li class="nav-item active">
                    <a class="nav-link active" href="search.html">销售网络查询</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="faq.html">常见问题解答</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="cooper.html">合作加盟</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">投诉与建议</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="down.html">文件下载</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="javacript:window.history(-1)"><i class="iconcis icon-goback f30"></i></a>
                </li>
                <li class="nav-item border-right">
                    <a class="nav-link" href="../index.html"><i class="iconcis icon-home f20"></i></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-search"></i>
                    </a>
                    <div class="dropdown-menu search-menu">
                        <form class="form-inline">
                            <input class="form-control" type="search" placeholder="搜索" aria-label="搜索">
                            <button class="btn" type="submit"><i class="iconcis icon-search"></i></button>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-user"></i>
                    </a>
                    <div class="dropdown-menu login-menu">
                        <form class="index-login">
                            <div class="wrapper">
                                <h4 class="bg-line-red">登录</h4>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="text" placeholder="请输入用户名/电子信箱">
                                </div>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="password" placeholder="请输入密码">
                                </div>
                                <button class="btn" type="submit">立即登录</button>
                                <p class="link"><a href="register.html">免费注册</a>|<a href="password.html">忘记密码</a></p>
                                <h5>快捷登录</h5>
                                <p>用第三方账号快速登录</p>
                                <div class="row text-center">
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_qq.png">
                                        <p>QQ登录</p>
                                    </div>
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_wx.png">
                                        <p>微信登录</p>
                                    </div>
                                </div>
                            </div>
                            <div class="login-footer">
                                注册或登录即表示同意<br>
                                本系统的”隐私保护条款”和”使用条款”。
                            </div>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-map"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"><i class="flag flag-china"></i>简体中文版</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-english"></i>English</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-sprache"></i>Sprache</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-japan"></i>日本語</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="iconcis icon-lines"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<div class="container-fluid">
    <div class="map-search-box mb-4" style="width: 100%;min-height: 500px">
        <div id="map">
            <img class="img-fluid" src="../../images/upload/map.jpg">
        </div>
        <div class="map-mask">
            <div class="row mt-5">
                <div class=" col-sm-0 col-md-3"></div>
                <div class=" col-sm-12 col-md-6">
                    <h6 class="mt-5 white">销售网络查询</h6>
                </div>
            </div>
            <div class="row">
                <div class=" col-sm-0 col-md-3"></div>
                <div class=" col-sm-12 col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control border-0" placeholder="输入您要查询的城市名称，例如：上海"
                               aria-describedby="seacrch">
                        <div class="input-group-append">
                            <span class="input-group-text search">查询</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-result">
            <h6><i class="iconcis icon-gnext font-weight-bold"></i>查询</h6>
            <div class="input-group mb-1">
                <input type="text" class="form-control" placeholder="输入您要查询的城市名称，例如：上海" aria-describedby="seacrch">
                <div class="input-group-append">
                    <span class="input-group-text seacrch">查询</span>
                </div>
            </div>
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="iconcis icon-location location"></div>
                    <h5 class="m-0">上海</h5>
                    <p class="m-0">共检索到9条信息：</p>
                </li>
                <li class="list-group-item">
                    <p class="m-0">大连老虎滩海洋公园</p>
                    <p class="m-0">地址：辽宁省大连市中山区滨海中路9号</p>
                    <p class="m-0">联系人：代用名</p>
                    <p class="m-0">电话：0411-82399409</p>
                    <p class="m-0">传真：0411-82689356</p>
                </li>
                <li class="list-group-item">
                    <p class="m-0">大连老虎滩海洋公园</p>
                    <p class="m-0">地址：辽宁省大连市中山区滨海中路9号</p>
                    <p class="m-0">联系人：代用名</p>
                    <p class="m-0">电话：0411-82399409</p>
                    <p class="m-0">传真：0411-82689356</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/swiper.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

</script>
</body>
</html>